<template>
    <div class="card">
        <v-navbar></v-navbar>
        <div class="card-wrapper">
            <ul v-if="cardInfo.length > 0" class="card-list">
                <li v-for="(card, index) in cardInfo" :key="index" class="item" @click="_sendCradId(card.bankId,card.banknum)">
                    <div class="img">
                        <img src="../../styles/imgs/card/abc.png" width="100%" alt="">
                    </div>
                    <div class="wrapper">
                        <div class="name"><span>{{card.bankname}}</span></div>
                        <div class="item-type"><span>{{card.banktype}}</span></div>
                        <div class="num">
                            <span class="text">****</span>
                            <span class="text">****</span>
                            <span class="text">****</span>
                            <span class="text">{{card.banknum | getVal}}</span>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="add" @click="addCard">
                <div class="left">
                    <i class="icon-add"></i>
                    <span class="text">添加银行卡</span>
                </div>
                <i class="icon-right"></i>
            </div>
        </div>
    </div>
</template>

<script>
import navbar from '@c/navbar/navbar'
import {mapState, mapMutations} from 'vuex'
import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'

export default {
    name: 'Card',
    data() {
        return {
            loadding: true,
            cardInfo: [],
        }
    },
    props: {
        show: {
            type: Boolean,
            default: true
        }
    },
    components: {
        'v-navbar': navbar,
    },
    computed: {
        ...mapState(['wtitle', 'rback'])
    },
    methods: {
        ...mapMutations(['WTITLE', 'RBACK', 'LOADDING']),
        // 跳转到添加银行卡页面
        addCard() {
            this.$router.push('/addCard')
        },
        // 获得银行卡信息
        _getCardInfo() {
            let userInfo = {
                userId: window.localStorage.userId
            }
            this.$store.state.loadding = true
            tokenPost(tokenLink.card.info, userInfo).then(re => {
                this.$store.state.loadding = false
                if (re.status === 0) {
                    this.cardInfo = re.data
                } else {
                    this.$Message.warning(re.msg)
                }
            })
        },
        // 发送银行卡id
        _sendCradId(id, num) {
            let info = {
                id: id,
                num: num
            }
            if (!this.show) {
                this.$emit('bank', info)
            }
        }
    },
    created() {

        if(this.show) {
            this.WTITLE('收款方式')
            this.RBACK(true)
        }
        this._getCardInfo()
    },
    filters: {
        // 过滤银行卡后四位
        'getVal'(val) {
            return val.substr(val.length - 4)
        }
    }
}
</script>